<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Save Data to Local File</title>
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    <script src="https://unpkg.com/lodash@4.17.21/lodash.js"></script>
    <script src="https://unpkg.com/filesaver@0.0.13/src/Filesaver.js"></script>
</head>
<body>
    <h2>保存数据到本地文件</h2>
    <input type="text" id="inputData" placeholder="输入一些文本">
    <button onclick="saveToFile()">保存到文件</button>
    <button onclick="loadFromFile()">从文件加载</button>
    <script>
        function saveToFile() {
            var input = document.getElementById('inputData').value;
            var blob = new Blob([input], { type: 'text/plain' });
            saveAs(blob, 'savedData.txt');
        }

        function loadFromFile() {
            var input = document.getElementById('inputData');
            var fileInput = document.createElement('input');
            fileInput.type = 'file';
            fileInput.onchange = function() {
                var file = fileInput.files[0];
                var reader = new FileReader();
                reader.onload = function(e) {
                    input.value = e.target.result;
                };
                reader.readAsText(file);
            };
            fileInput.click();
        }
    </script>
</body>
</html>